<script setup lang="ts">
import { useAudienceConfig } from "./composables/useAudienceConfig"

// 路由信息
const route = useRoute()

// 获取人设信息
const personaId = route.params.id as string
const personaName = route.query.personaName as string

// 使用受众画像配置逻辑
const {
  loading,
  configData,
  fillDemoData,
  saveConfig,
  goBack
} = useAudienceConfig(personaId)
</script>

<template>
  <div class="audience-config-container">
    <!-- 页面头部 -->
    <div class="page-header">
      <div class="header-content">
        <h1 class="page-title">{{ personaName }} - 受众画像配置</h1>
        <p class="page-subtitle">
          人设ID：{{ personaId }} | 所属行业：餐饮美食
        </p>
        <p class="description">
          为该人设配置专属的受众画像和AI分析工作流，提升内容推荐精准度
        </p>
      </div>
      <div class="header-actions">
        <el-button @click="goBack">
          <el-icon><ArrowLeft /></el-icon>
          返回
        </el-button>
        <el-button @click="fillDemoData">填入示例数据</el-button>
        <el-button
          type="primary"
          :loading="loading"
          @click="saveConfig"
        >
          保存配置
        </el-button>
      </div>
    </div>

    <!-- 配置内容 -->
    <div class="config-content">
      <!-- AI工作流配置 -->
      <div class="config-section">
        <div class="section-header">
          <el-icon class="section-icon"><Setting /></el-icon>
          <h3 class="section-title">AI工作流配置</h3>
        </div>

        <div class="form-grid">
          <div class="form-item">
            <label class="form-label">工作流链路ID</label>
            <el-input
              v-model="configData.workflowId"
              placeholder="WF_AUDIENCE_FOOD_EXPERT"
              class="form-input"
            />
          </div>
          <div class="form-item">
            <label class="form-label">工作流名称</label>
            <el-input
              v-model="configData.workflowName"
              placeholder="餐饮专家人设受众分析流"
              class="form-input"
            />
          </div>
        </div>
      </div>

      <!-- 受众画像预设 -->
      <div class="config-section">
        <div class="section-header">
          <h3 class="section-title">受众画像预设</h3>
        </div>

        <div class="preset-item">
          <label class="preset-label">主要受众（预设/默认值）</label>
          <el-input
            v-model="configData.primaryAudience"
            type="textarea"
            :rows="3"
            placeholder="25-40岁的美食爱好者和餐饮从业者，关注专业技巧和行业内容，对品质有较高要求。"
            class="preset-textarea"
          />
        </div>

        <div class="preset-item">
          <label class="preset-label">用户活跃时段（预设/默认值）</label>
          <el-input
            v-model="configData.activeTime"
            type="textarea"
            :rows="2"
            placeholder="工作日：12:00-14:00, 18:00-21:00；周末：11:00-15:00, 17:00-22:00。"
            class="preset-textarea"
          />
        </div>

        <div class="preset-item">
          <label class="preset-label">内容偏好（预设/默认值）</label>
          <el-input
            v-model="configData.contentPreference"
            type="textarea"
            :rows="2"
            placeholder="专业技巧分享、行业内幕揭秘、食材选购指南、经营心得、与同行交流。"
            class="preset-textarea"
          />
        </div>

        <div class="update-time">
          最后更新时间：{{ configData.lastUpdateTime }}
        </div>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
@import "./styles/index.scss";
</style>
